<template>
    <view class="product-box" @click="productClick(itemData)" :data-spmCntSuffix="spmSuffix" :data-spm="itemData" :data-custom="spmIndex">
        <image class="product-img" :src="itemData.mainPictureId" mode="aspectFill" />
        <view >
            <view class="product-title">{{ itemData.productTitle }}</view>
            <view class="price-box">
                <view class="left-flex">
                    <viSioPrice :priceModel="itemData.sellPrice"></viSioPrice>
                    <!-- <view class="tag-box">5.8折</view> -->
                </view>
                <view class="sale-number" v-if="itemData.soldNumber > 0">已售{{ itemData.soldNumber }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import viSioPrice from '@/components/viSioPrice/index.vue';
export default {
    props: {
        itemData: {
            type: Object,
            default: {}
        },
        spmIndex: {
            type: Number,
            default: 1
        },
        spmSuffix: {
            type: String,
            default: ''
        }
    },
    components: {
        viSioPrice
    },
    computed: {},
    data() {
        return {};
    },
    onLoad() { },
    methods: {
        productClick(item) {
            console.log(999,this.spmIndex)
            this.$emit('itemClick', item)
        }
    }
};
</script>

<style lang="scss" scoped>
.product-box {
    display: flex;
    flex-direction: column;
    width: 338rpx;
    margin-bottom: 35rpx;
    background: #fff;
    border-radius: 26rpx;
    .product-img {
        width: 338rpx;
        height: 350rpx;
        position: relative;
        border-radius: 26rpx;
        background: #D8D8D8;
    }

    .product-title {
        padding: 0 16rpx;
        margin: 18rpx 0;
        color: $sl-color-black;
        font-size: 28rpx;
        font-weight: 600;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 这里是超出几行省略 */
        overflow: hidden;
    }

    .price-box {
        padding: 0 16rpx 20rpx 16rpx;
        display: flex;
        align-items: baseline;

        .left-flex {
            display: flex;
            align-items: baseline;

            .tag-box {
                height: 28rpx;
                font-size: 20rpx;
                background: #FFF2EC;
                color: $sl-color-price;
                margin-left: 7rpx;
                padding: 0 6rpx;
            }
        }

        .sale-number {
            font-size: 20rpx;
            color: #B5B5D2;
            margin-left: 10rpx;
        }
    }
}
</style>
